<template>
    <view class="flex grid-gap-4">
        <view class="flex flex-column grid-gap-2" style="width: 44px;">
            <image :src="props.item.headimg" mode="scaleToFill" class="rounded-circle" style="width: 44px;height: 44px;"
                @tap="$page.open('/pages/technician/details?id=' + props.item.uid)" />
            <slot name="headimg-tags"/>
        </view>
        <view class="flex-1 flex flex-column grid-gap-1">
            <view class="flex flex-center">
                <text class="h8 font-weight-600 text-primary flex-1 py-2"
                    @tap="$page.open('/pages/technician/details?id=' + props.item.uid)">{{ props.item.nickname }}</text>
                <slot name="collect" />
            </view>
            <text class="h9 line-height-2" selectable user-select>{{ props.item.content }}</text>
            <view class="grid-columns-6 grid-gap-2" @tap.stop v-if="props.item.images && props.item.images.length > 0">
                <view class="grid-column-2" v-for="(url, index) in props.item.images" :key="index"
                    @tap.stop="preview(index)">
                    <image :src="url" lazy-load mode="scaleToFill" class="bg"
                        style="width: 100%;height: calc(calc(100vw - 140px) / 3);" />
                </view>
            </view>
            <view class="grid-columns-6 grid-gap-2" @tap.stop v-if="props.item.video">
                <view class="grid-column-4">
                    <video :src="props.item.video" lazy-load class="bg" :direction="0"
                        style="width: 100%;height: calc(100vw - 140px);" />
                </view>
            </view>
            <view class="flex flex-x-space-between">
                <text class="h10 text-placeholder">{{ $func.formatFriendlyTime(props.item.create_time) }}</text>
                <view class="rounded-2 bg-primary-light-9 px-3 more border border-primary-light-7"
                    @tap.stop="showMore = !showMore">
                    <uni-icons type="more-filled" color="var(--xl-primary-dark-1)"></uni-icons>
                    <view class="more-body flex" :class="{ 'show': showMore }">
                        <slot name="more" />
                    </view>
                </view>
            </view>
            <view class="bg-white rounded-4 p-2 flex flex-column" v-if="props.item.like_list.length > 0">
                <view>
                    <uni-icons type="hand-up" color="var(--xl-primary)"></uni-icons>
                    <text
                        class="ml-2 h10 text-primary">{{ props.item.like_list.slice(0, 100).map((item: any) => item.nickname).join(',') }}</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref, defineProps, watch } from "vue";
import { $page, $func } from "@/utils";
const props = withDefaults(defineProps<{
    item: any
    tapNum?: number
}>(), {
    item: {},
    tapNum: 0
});
const emit = defineEmits(['showMoreChange']);
const showMore = ref(false);
watch(() => props.tapNum, () => {
    showMore.value = false;
})
watch(() => showMore.value, (val: boolean) => {
    emit('showMoreChange', val);
})
const preview = (index: number) => {
    uni.previewImage({
        current: index,
        urls: props.item.images
    });
}
</script>

<style lang="scss" scoped>
.more {
    position: relative;

    .more-body {
        width: 0;
        position: absolute;
        right: 110%;
        top: 50%;
        transform: translateY(-50%);
        border-radius: 4px;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
        z-index: 1;
        transition: width 0.3s;
        overflow: hidden;
    }

    .more-body.show {
        width: 80px;
    }
}
</style>